import {
  Link,
} from '@mui/material';
import { Link as LinkIcon, OpenInNew } from '@mui/icons-material';
import type { LinkCollection } from '../../types/config.types';
import { ListCard } from '../templates/ListCard';

interface LinksWidgetProps {
  collection: LinkCollection;
}

function LinksWidget({ collection }: LinksWidgetProps) {
  return (
    <ListCard
      title={collection.name}
      icon={<LinkIcon />}
      items={collection.links}
      renderItem={(link) => (
        <Link
          href={link.url}
          target="_blank"
          rel="noopener noreferrer"
          underline="hover"
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 0.5,
          }}
        >
          {link.name}
          <OpenInNew sx={{ fontSize: 14, opacity: 0.6 }} />
        </Link>
      )}
    />
  );
}

export default LinksWidget;
