import * as React from "react";
import {
  List,
  ListItem,
  ListItemAvatar,
  ListItemText,
  Avatar,
  Typography,
  Box,
  Button,
} from "@mui/material";

export interface LatestItem {
  id: string | number;
  icon: React.ReactNode;
  iconBgColor?: string;
  title: string;
  subtitle: string;
  amount: string;
  timeAgo: string;
}

export interface LatestItemsListProps {
  title?: string;
  items: LatestItem[];
  onViewAll?: () => void;
  accentColor: any;
}

export default function LatestItems({
  title = "Recent Transactions",
  items,
  onViewAll,
  accentColor,
}: LatestItemsListProps) {
  return (
    <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2 }}>
      {/* Header */}
      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, px: 2 }}>
        <Typography variant="h6" fontWeight="bold">
          {title}
        </Typography>
        {onViewAll && (
          <Button
            variant="text"
            color="inherit"
            size="small"
            sx={{ textTransform: "none", color: "text.secondary", fontWeight: "medium" }}
            onClick={onViewAll}
          >
            view all
          </Button>
        )}
      </Box>

      {/* List */}
      <List disablePadding>
        {items.map((item, index) => (
          <ListItem
            key={item.id}
            sx={{
              px: { xs: 1, sm: 2 },
              py: 2,
              mb: index !== items.length - 1 ? 1 : 0,
              borderRadius: 3,
              "&:hover": { bgcolor: "action.hover" },
              transition: "background-color 0.2s ease",
            }}
          >
            <ListItemAvatar>
              <Avatar
                variant="rounded"
                sx={{
                  bgcolor: `${accentColor}22`,
                  color: "inherit",
                  width: 48,
                  height: 48,
                  borderRadius: 3,
                  mr: 2,
                }}
              >
                {item.icon}
              </Avatar>
            </ListItemAvatar>
            
            <ListItemText
              primary={
                <Typography variant="subtitle1" fontWeight={600} color="text.primary">
                  {item.title}
                </Typography>
              }
              secondary={
                <Typography variant="body2" color="text.secondary">
                  {item.subtitle}
                </Typography>
              }
            />

            <Box sx={{ textAlign: "right" }}>
              <Typography variant="subtitle1" fontWeight={700} color="text.primary">
                {item.amount}
              </Typography>
              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
                {item.timeAgo}
              </Typography>
            </Box>
          </ListItem>
        ))}
      </List>
    </Box>
  );
}