import {
  Card,
  CardContent,
  Typography,
  Link,
  Stack,
  Box,
  Divider,
} from '@mui/material';
import { Link as LinkIcon, OpenInNew } from '@mui/icons-material';
import type { LinkCollection } from '../../types/config.types';

interface LinksWidgetProps {
  collection: LinkCollection;
}

function LinksWidget({ collection }: LinksWidgetProps) {
  return (
    <Card>
      <CardContent>
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
          <LinkIcon color="primary" sx={{ mr: 1 }} />
          <Typography variant="h6">{collection.name}</Typography>
        </Box>
        <Divider sx={{ mb: 1.5 }} />
        <Stack spacing={0.5}>
          {collection.links.map((link, i) => (
            <Link
              key={i}
              href={link.url}
              target="_blank"
              rel="noopener noreferrer"
              underline="hover"
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 0.5,
                py: 0.5,
              }}
            >
              {link.name}
              <OpenInNew sx={{ fontSize: 14, opacity: 0.6 }} />
            </Link>
          ))}
        </Stack>
      </CardContent>
    </Card>
  );
}

export default LinksWidget;