import { Card, CardContent, Typography } from "@mui/material";
import { getLocalizedString } from "@olenbetong/appframe-core";
import type { DamagesRecord } from "../../data";

type DuplicatePhoneViewItemProps = {
	record: DamagesRecord;
	linkToDamage: boolean;
};

export function DuplicatePhoneViewItem({ record, linkToDamage }: DuplicatePhoneViewItemProps) {
	return (
		<Card
			variant="outlined"
			onClick={() => {
				if (linkToDamage) {
					window.location.href = `${record.ID}`;
				}
			}}
		>
			<CardContent>
				<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
					{record.Date.toLocaleDateString()}
				</Typography>
				<Typography variant="h5" sx={{ mb: 1.5 }}>
					{record.ElementID} - {record.DisplayName}
				</Typography>

				<Typography>{getLocalizedString("Description")}:</Typography>
				<Typography sx={{ mb: 1.5 }} color="text.secondary">
					{record.Description}
				</Typography>

				<Typography>{getLocalizedString("Cause")}: </Typography>
				<Typography sx={{ mb: 1.5 }} color="text.secondary">
					{record.Cause}
				</Typography>

				<Typography>{getLocalizedString("Action")}: </Typography>
				<Typography sx={{ mb: 1.5 }} color="text.secondary">
					{record.Action}
				</Typography>
			</CardContent>
		</Card>
	);
}