import * as React from "react";
import {
  List,
  ListItem,
  ListItemAvatar,
  ListItemText,
  Avatar,
  Typography,
  Box,
  IconButton,
} from "@mui/material";
import { alpha } from "@mui/material/styles";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { LatestItemsViewProps } from "./LatestItems.props";

export default function LatestItemsView({
  items,
  title,
  canExpand,
  onExpand,
  isFetching,
  colorScheme,
}: LatestItemsViewProps) {
  const accentColor = colorScheme?.primary || "";

  return (
    <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2, opacity: isFetching ? 0.6 : 1, transition: "opacity 0.3s ease", pointerEvents: isFetching ? "none" : "auto" }}>
      <Box sx={{ mb: 2, px: 2 }}>
        <Typography variant="h6" fontWeight="bold">
          {title}
        </Typography>
      </Box>

      <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" },
            }}
          >
            <ListItemAvatar>
              <Avatar
                variant="rounded"
                sx={{
                  bgcolor: alpha(accentColor, 0.13),
                  width: 48,
                  height: 48,
                  borderRadius: 3,
                  mr: 2,
                }}
              />
            </ListItemAvatar>

            <ListItemText
              primary={
                <Typography variant="subtitle1" fontWeight={600}>
                  {item.title}
                </Typography>
              }
              secondary={
                <Typography variant="body2" color="text.secondary">
                  {item.subtitle}
                </Typography>
              }
            />

            <Box sx={{ textAlign: "right" }}>
              <Typography variant="subtitle1" fontWeight={700}>
                {item.amount}
              </Typography>
              <Typography variant="caption" color="text.secondary">
                {item.timeAgo}
              </Typography>
            </Box>
          </ListItem>
        ))}

        {canExpand && (
          <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
            <IconButton size="small" onClick={onExpand}>
              <ExpandMoreIcon />
            </IconButton>
          </Box>
        )}
      </List>
    </Box>
  );
}